<template>
  <div @click="opened = false" v-if="opened" class="mask animate__animated animate__fadeIn"></div>
  <div class="left-menu" :class="{'opened': opened}">

    <div class="menus">
      <div v-if="authStore().$state.userInfo" class="user-info">
        <el-avatar class="avatar" :src="user" :size="80"/>
        <div class="phone">欢迎登录！{{ authStore().$state.userInfo.nickname }}</div>
        <el-button class="logout" type="danger" @click="logout">退出登录</el-button>
      </div>
      <div @click="clickMenuItem(item)" v-for="(item, index) in menus" :key="index" class="item"
           :class="{'active': current == item.id}">
        {{ item.name }}
      </div>
    </div>
    <div @click="opened = !opened" class="btn">{{ opened ? '收起' : '展开' }}</div>
  </div>
</template>

<script setup lang="ts">
import {authStore} from "@/store/auth";
import user from '@/assets/images/user.png'
import {ElMessageBox} from 'element-plus'

const router = useRouter();

const props = defineProps({
  current: {
    type: Number,
    default: 0,
  },
});

const opened = ref(false);

const menus = [
  {
    id: 0,
    name: '首页',
    route: {
      name: 'index',
    },
  }
  , {
    id: 101,
    name: '共享轮椅数据智慧大屏',
    route: null,
  },
]

const clickMenuItem = (item: { id: number, route: any; }) => {
  opened.value = false
  if (item.route) {
    router.push(item.route)
  }
}

const logout = () => {
  ElMessageBox.confirm(
      '您确定要退出登录吗？',
      '系统提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }
  )
      .then(() => {
        authStore().$patch((state) => {
          state.userInfo = null
          router.replace({
            name: 'login'
          })
          ElMessage({
            type: 'success',
            message: '您已安全退出登录',
          })
        })

      })
      .catch(() => {
      })
}

</script>

<style scoped lang="scss">
.mask {
  position: absolute;
  background: #00000088;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1000;
  animation-duration: 0.3s;
}

.left-menu {
  position: absolute;
  top: 0;
  left: -240px;
  bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  transition: all 0.3s;
  z-index: 1001;

  .menus {
    width: 240px;
    padding-top: 40px;
    padding-bottom: 30px;
    background: #082C60;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #ffffff;

    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #141b43;
      padding-top: 40px;

      .avatar {
        margin-bottom: 20px;
      }

      .phone {
        font-size: 14px;
        margin-bottom: 20px;
      }

      .logout {
        margin-bottom: 20px;
      }

    }

    .item {
      padding-left: 15px;
      height: 60px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
    }

    .active {
      background: #3a5f94;
      color: #00edef;
    }

    .item:hover {
      color: #00edef;
    }
  }

  .btn {
    background: #082C60;
    padding: 50px 5px;
    width: 30px;
    text-align: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 14px;
    cursor: pointer;
  }

  .btn:hover {
    color: #00edef;
  }

  .btn:active {
    color: #8ec8ff;
  }
}

.opened {
  left: 0px;
}
</style>